<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打卡模拟</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/elementUI.js"></script>
</head>
<body>

<div id="app">

    <h2>欢迎你：{{currentEmp.name}}</h2>


    <div>
        <el-date-picker
                v-model="shangbanForm.dakaTime"
                type="datetime"
                placeholder="选择上班打卡时间">
        </el-date-picker>
        <el-button @click="daka('上班卡')">上班打卡</el-button>
    </div>

    <div>
        <el-date-picker
                v-model="xiabanForm.dakaTime"
                type="datetime"
                placeholder="选择下班打卡时间">
        </el-date-picker>
        <el-button @click="daka('下班卡')">下班打卡</el-button>
    </div>



    <el-date-picker
            v-model="kaoqinDetailMonth"
            type="month"
            placeholder="选择月">
    </el-date-picker>
    <el-table :data="gridData">
        <el-table-column property="worknum" label="工号"></el-table-column>
        <el-table-column property="name" label="姓名"></el-table-column>
        <el-table-column  label="日期">
            <template slot-scope="scope">
                {{scope.row.workDate|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column property="type" label="类型"></el-table-column>
        <el-table-column label="规定时间">
            <template slot-scope="scope">
                {{scope.row.rule|format('hh:mm:ss')}}
            </template>
        </el-table-column>
        <el-table-column label="打卡时间">
            <template slot-scope="scope">

                <span v-if="scope.row.dakaTime!=null">{{scope.row.dakaTime|format('yyyy-MM-dd hh:mm:ss')}}</span>
                <span v-if="scope.row.dakaTime==null">没有数据</span>
            </template>
        </el-table-column>
        <el-table-column property="result" label="打卡结果"></el-table-column>
    </el-table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            //考勤明细用的信息
            gridData:[],
            kaoqinDetailMonth:"",
            currentEmp:{},

            shangbanForm:{
                name:"",
                worknum:"",
                type:"",
                workDate:"",
                rule:"",
                dakaTime:"",
            },
            xiabanForm:{
                name:"",
                worknum:"",
                type:"",
                workDate:"",
                rule:"",
                dakaTime:"",
            }
        },
        watch:{
            kaoqinDetailMonth:{
                deep:true,
                handler(){
                    if(this.kaoqinDetailMonth!=null){
                        this.initKaoqinDetailInfo();
                    }
                }
            },
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            daka(type){

                if(type=="上班卡"){
                    this.shangbanForm.name = this.currentEmp.name;
                    this.shangbanForm.worknum = this.currentEmp.worknum;
                    this.shangbanForm.type = type;
                    axios.post("/emp/addDaka",this.shangbanForm).then(res=>{
                        this.kaoqinDetail(this.currentEmp);
                    })
                }else{
                    this.xiabanForm.name = this.currentEmp.name;
                    this.xiabanForm.worknum = this.currentEmp.worknum;
                    this.xiabanForm.type = type;
                    axios.post("/emp/addDaka",this.xiabanForm).then(res=>{
                        this.kaoqinDetail(this.currentEmp);
                    })
                }


            },
            kaoqinDetail(emp){
                this.currentEmp = emp;
                this.kaoqinDetailMonth = new Date()
                this.initKaoqinDetailInfo();
            },
            initKaoqinDetailInfo(){
                let queryObj = {
                    worknum:this.currentEmp.worknum,
                    queryMonth:this.kaoqinDetailMonth,
                    name:this.currentEmp.name,
                }
                axios.post("/emp/findEmpKaoqinDetail",queryObj).then(res=>{
                    this.gridData = res.data;
                })
            },

        },
        created(){
            let emp = JSON.parse(localStorage.getItem("userInfo"));
            this.kaoqinDetail(emp);
        }
    })
</script>

</body>
</html>